import 'package:carousel_slider/carousel_slider.dart';
import 'package:carousel_slider/carousel_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:netstorage/model/CommonModel.dart';
import 'package:netstorage/utils/screen_adapter_helper.dart';

/**
 * 轮播图组件
 */
class BannerWidget extends StatefulWidget {
  final List<CommonModel> bannerList;
  const BannerWidget({super.key,required this.bannerList});

  @override
  State<BannerWidget> createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  int _currentIndex = 0;
  CarouselSliderController _controller = CarouselSliderController();
  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;// 获取屏幕宽度
    return Stack(
      children: [
        CarouselSlider(
            items: widget.bannerList.map((item) => _tabImage(item,width)).toList(),
            carouselController: _controller,
            options: CarouselOptions(
              height: 180.px,
              autoPlay: true,
              viewportFraction: 1.0,
              onPageChanged: (index,reason){
                setState(() {
                  _currentIndex = index;
                });
              }
            ),
        ),
        // 轮播图指示器
        Positioned(
          bottom: 10,left:0,right: 0,
          child: _indicator()
        )
      ],
    );
  }

  Widget _tabImage(CommonModel model, double width){
    return GestureDetector(
      onTap: (){
        //TODO 点击后跳转页面
      },
      child: Image.network(model.icon ?? '', width: width, fit: BoxFit.cover)
    );
  }

  _indicator() {// 指示器横向排列显示
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: widget.bannerList.asMap().entries.map((e){
        return GestureDetector(
          onTap: () => _controller.animateToPage(e.key),
          child: Container(
            width: 6, height: 6, margin: const EdgeInsets.symmetric(vertical: 8,horizontal: 4),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: (Colors.white).withOpacity(_currentIndex == e.key ? 0.9 : 0.4),
            ),
          ),
        );
      }).toList(),
    );
  }
}
